// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '../../utils' as f3;
@import '~@mozilla-protocol/core/protocol/css/includes/lib';

.c-private-mode {
    background: f3.$pink-light center / cover no-repeat url('/media/img/firefox/family/grid-cylinder.svg');

    @media (prefers-reduced-motion: no-preference) and (#{$mq-sm}) {
        background-attachment: fixed;
    }

    .c-module-tag-title {
        background-color: f3.$pink-dark;
    }

    .c-browser {
        margin-top: $layout-md;
        margin-bottom: $layout-md;
        position: relative;

        &-content {
            background-color: f3.$violet-extra-dark;

            .c-subtitle,
            p {
                color: f3.$white;
            }
        }

        .c-private-mode-mask {
            $size: 85px;
            position: absolute;
            top: -20px;
            right: 20px;
            width: $size;
            height: $size;
            @media #{$mq-md} {
                top: 15%;
                right: -35px;
            }
        }
    }

    .c-card.t-shadow {
        @include f3.card-shadow(f3.$green-extra-dark);
    }

    @media #{$mq-sm} {
        .l-grid {
            > * {
                max-width: 500px;
                margin-right: auto;
                margin-left: auto;
            }
        }
    }

    @media #{$mq-md} {
        .l-grid {
            .c-card {
                margin-left: unset;
            }

            .c-blurb {
                margin-top: -#{$layout-2xs};
                margin-right: unset;
            }
        }
    }
}

@supports (display: grid) {
    @media #{$mq-lg} {
        .c-private-mode {
            .l-grid {
                display: grid;
                grid-template-columns: [column-one] minmax(32ch, 45%) [column-two] 1fr;
                column-gap: $layout-lg;

                .c-browser {
                    align-self: center;
                    grid-column-start: column-one;
                    grid-row: 1 / span 2;
                }

                .c-card,
                .c-blurb {
                    grid-column-start: column-two;
                }

                .c-card {
                    width: 80%;
                    align-self: end;
                }

                .c-blurb {
                    align-self: start;
                    width: 60%;
                    min-width: 40ch;
                    margin-top: $spacing-lg;
                    margin-bottom: 0;

                    @media #{$mq-xl} {
                        margin-top: -#{$spacing-lg};
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}

// only supported in Fx104 and up, but so fun!
@supports (grid-template-columns: subgrid) {
    @media (max-width: #{$screen-sm}) {
        .c-private-mode {
            overflow-x: hidden;

            .c-browser {
                display: grid;
                grid-template-columns: [content-start] 100% [content-end] 200px [offscreen];

                &-bar,
                &-content {
                    grid-column: 1 / offscreen;
                }

                &-content {
                    display: grid;
                    grid-template-columns: subgrid;

                    .c-subtitle,
                    p {
                        grid-column: content-start / content-end;
                        padding-right: $spacing-lg; // match mzp-l-content padding
                    }
                }
            }
        }
    }
}

.js {
    @media (prefers-reduced-motion: no-preference) {
        .c-private-mode-mask {
            opacity: 0;

            &.animate-pop-in {
                animation-delay: calc(1s + #{f3.$animation-duration});
            }
        }

        .c-private-mode {
            .c-browser-content {
                background-color: f3.$white;

                .c-subtitle,
                p {
                    color: f3.$black;
                }
            }

            .c-browser-content.mzp-t-dark {
                background-color: f3.$violet-extra-dark;
                transition-property: color, background-color;
                transition-delay: 1s;
                transition-duration: 1s;

                .c-subtitle,
                p {
                    color: f3.$white;
                    transition: color 1s 1s;
                }
            }
        }
    }
}
